<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
        content="width=device-width, initial-scale=1.0">
<meta name="HandheldFriendly" content="true">
<title>Sample</title>

</head>
<body>
<input id="txt_address" class="input_css" type="text" value="Where Are You ?" width="200px" size="100"/>
<div id="map_canvas">
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="jquery/jquery-1.6.2.min.js"></script>
<script language="javascript" type="text/javascript">
     var map, marker,
     //实例化地址解析器
     geoCoder = new google.maps.Geocoder(),
     //初始化地图的配置
     myOptions = {
         zoom: 15,
         center: new google.maps.LatLng(114.057868, 22.543099),
         mapTypeId: google.maps.MapTypeId.ROADMAP
     };
     function GetGeoCoder() {
         var searchAddress = $("#txt_address").val();
         geoCoder.geocode({
             'address': searchAddress
         },
         function(results, state) {
             if (state = google.maps.GeocoderStatus.OK) {
                 if (results[0]) {
                     var point = results[0].geometry.location;
                     if (marker) {
                         marker.setMap(null);
                     }
                     marker = new google.maps.Marker({
                         map: map,
                         position: point
                     });
                     var infowindow = new google.maps.InfoWindow({
                         content: '<h3>我在这里.</h3>' + results[0].formatted_address
                     });
                     google.maps.event.addListener(marker, 'click',
                     function() {
                         infowindow.open(map, marker);
                     });
                     map.setCenter(point);
 
                 }
             }
         })
     }
     //利用html5的geolocation来获取当前位置
     function GetGeoLocation() {
         if (navigator.geolocation) {
             navigator.geolocation.getCurrentPosition(function(position) {
                 var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
                 console.log(position);
                 geoCoder.geocode({
                     'latLng': pos
                 },
                 function(results, state) {
                     if (state = google.maps.GeocoderStatus.OK) {
                         if (results[0]) {
                             var point = results[0].geometry.location;
                             var myDirection = results[0].formatted_address;
                             if (marker) {
                                 marker.setMap(null);
                             }
                             marker = new google.maps.Marker({
                                 map: map,
                                 position: point
                             });
                             var infowindow = new google.maps.InfoWindow({
                                 content: '<h3>我在这里</h3>' + myDirection
                             });
                             google.maps.event.addListener(marker, 'click',
                             function() {
                                 infowindow.open(map, marker);
                             });
                             map.setCenter(point);
                             $("#txt_address").val(myDirection.split(' ')[0]);
 
                         }
                     }
                 })
             },
             function() {
                 handleNoGeolocation(true);
             },
             {
                 'enableHighAccuracy': true,
                 'timeout': 10000,
                 'maximumAge': 0
             });
         } else {
             // 浏览器不支持Geolocation
             handleNoGeolocation(false);
         }
     }
 
     function handleNoGeolocation(errorFlag) {
         if (errorFlag) {
             var content = 'Error: The Geolocation service failed.';
         } else {
             var content = 'Error: Your browser doesn\'t support geolocation.';
         }
 
         var options = {
             map: map,
             position: new google.maps.LatLng(114.057868, 22.543099),
             content: content
         };
 
         var infowindow = new google.maps.InfoWindow(options);
         map.setCenter(options.position);
     }
     $(function() {
         map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
         //页面加载时，利用html5获取当前位置
         GetGeoLocation();
         $('#txt_address').bind('keyup',
         function(event) {
             if (event.keyCode == 13) {
                 GetGeoCoder();
             }
         });
     });
 </script>
</body>
</html>